<template>
  <div id="contain">
    <div> 
      <el-menu
        default-active="1"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        style="width:950px"
      >
        <el-menu-item index="1">未支付</el-menu-item>
        <el-menu-item index="2">已支付</el-menu-item>
        <el-menu-item index="3">待评价</el-menu-item>
        <el-menu-item index="4">已完成</el-menu-item>
      </el-menu>
    </div>
    <xl1 v-if="activeIndex === '1'" />
    <xl2 v-if="activeIndex === '2'" />
    <xl3 v-if="activeIndex === '3'" />
    <xl4 v-if="activeIndex === '4'" />
  </div>
</template>

<script>
import xl1 from "@/views/userInfo/xl1.vue";
import xl2 from "@/views/userInfo/xl2.vue";
import xl3 from "@/views/userInfo/xl3.vue";
import xl4 from "@/views/userInfo/xl4.vue";

export default {
  components: {
    xl1,
    xl2,
    xl3,
    xl4,
  },
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
    },
  },
};
</script>
<style  scoped>
</style>>